/**
 * Copyright (c) Enalean, 2016. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

$tlp-dropdown-radius: 3px;
$tlp-dropdown-arrow-size: 10px;
$tlp-dropdown-shadow: 0 6px 12px rgba(0, 0, 0, .175);
$tlp-dropdown-animation: 100ms ease-in-out showDropdown;

$flatpickr-day-hover: #f3f3f3;
$flatpickr-day-dimmed: #d0d0d0;

// scss-lint:disable QualifyingElement
div.flatpickr-wrapper.inline div.flatpickr-calendar,
div.flatpickr-wrapper.open div.flatpickr-calendar {
    z-index: 100051;
}

// scss-lint:disable PseudoElement
// scss-lint:disable QualifyingElement
// scss-lint:disable SelectorFormat
div.flatpickr-calendar {
    border: 0;
    font-family: $tlp-font-family;
    box-shadow: $tlp-dropdown-shadow;
    animation: $tlp-dropdown-animation;

    &:before {
        display: none;
    }

    &:after {
        margin: 0 #{-$tlp-dropdown-arrow-size};
        border-width: $tlp-dropdown-arrow-size;
        border-bottom-color: $tlp-theme-color;
    }

    > .flatpickr-month {
        padding: 10px;
        border: 1px solid $tlp-theme-color;
        border-radius: $tlp-dropdown-radius $tlp-dropdown-radius 0 0;
        background: $tlp-theme-color;
        color: $tlp-ui-white;

        > .flatpickr-prev-month,
        > .flatpickr-next-month {
            position: relative;
            bottom: -2px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            font-size: 16px;

            &:hover {
                background: $tlp-ui-white;
                color: $tlp-theme-color;
            }
        }

        .flatpickr-current-month {
            > .cur_month {
                color: $tlp-ui-white;
                font-weight: 600;
            }

            > .cur_year {
                max-width: 60px;
                padding: 0 2px;
                color: $tlp-ui-white;
                font-family: $tlp-font-family;
                font-size: 20px;
            }

            > .cur_year:hover {
                background: transparent;
            }
        }
    }

    > .flatpickr-weekdays {
        display: flex;
        justify-content: space-between;
        padding: 0 10px 10px;
        background: $tlp-theme-color;
        color: $tlp-ui-white;

        > span {
            font-weight: 600;
            opacity: .8;

            &:first-child {
                visibility: hidden;
            }
        }
    }

    > .flatpickr-weeks {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;

        > .disabled {
            width: 30px;
            height: 30px;
            margin: 0;
            border: 0;
            color: $tlp-theme-color;
            line-height: 28px;
            text-align: center;
        }
    }

    > .flatpickr-days {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px;
        border: 0;
        border-left: 1px solid $tlp-ui-border-light;

        > .flatpickr-day {
            width: 30px;
            height: 30px;
            margin: 0;
            border: 0;
            border-radius: 50%;
            line-height: 28px;

            &:hover {
                border-color: $flatpickr-day-hover;
                background: $flatpickr-day-hover;
            }

            &.prevMonthDay,
            &.nextMonthDay,
            &.prevMonthDay:hover,
            &.nextMonthDay:hover {
                border: 0;
                background: 0;
                color: $flatpickr-day-dimmed;
            }

            &.today {
                border: 0;
                box-shadow: inset 0 0 0 1px $tlp-theme-color;
            }

            &.today:hover {
                background: $tlp-theme-color;
                color: $tlp-ui-white;
            }

            &.selected,
            &.selected:hover {
                background: $tlp-theme-color;
                color: $tlp-ui-white;
            }
        }
    }

    > .flatpickr-time {
        border: 0;
        border-top: 1px solid $tlp-ui-border-light;

        > .flatpickr-am-pm:hover,
        > .flatpickr-minute:hover,
        > .flatpickr-hour:hover {
            background: 0;
        }
    }
}

@keyframes showDropdown {
    0% {
        transform: translateY(-10px);
        box-shadow: 0 0 0;
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        box-shadow: $tlp-dropdown-animation;
        opacity: 1;
    }
}
